

<template>
    <div>
        <div class='head'>
			<div class="top"></div>
			<div class="menu">
				<div class="ul-prt">
					<ul class="vertical-center wraps top-ul">
						<li class="nav-top-list__li logo"><img src="../../../static/img/logo.png"></li>
						<li class="nav-top-list__li menu-li menu-li-active">首页</li>
						<li class="nav-top-list__li menu-li">成功故事</li>
						<li class="nav-top-list__li menu-li">意见反馈</li>
						<li class="nav-top-list__li menu-li">关于我们</li>
						<li class="nav-top-list__rightInfo">
							<a href=""><img src="../../../static/img/avatar.jpg"></a>
						</li>
					</ul>
				</div>
			</div>
		</div>

        <div class="main">
            <div class="wraps">
                <div class="user-column">
                    <ul class="col-ul div-padding">
                        <li class="active">基本信息</li>
                        <li>好友</li>
                        <li>黑名单</li>
                        <li>谁看过我</li>
                        <li>我看过谁</li>
                        <li>在线聊天</li>
                    </ul>
                </div>

                <div class="user-setting">
                    <div>
                        <div class="div-padding pic">
                            <div class="img-top left">
                                <img src="../../../static/img/user.jpg" alt="">
                            </div>
                            <div class="img-list">
                                <div class="img-list-li">
                                    <img src="../../../static/img/user.jpg" alt="">
                                    <img src="../../../static/img/user.jpg" alt="">
                                    <img src="../../../static/img/user.jpg" alt="">
                                </div>
                                <div class="img-list-li second">
                                    <img src="../../../static/img/user.jpg" alt="">
                                    <img src="../../../static/img/user.jpg" alt="">
                                    <img src="../../../static/img/user.jpg" alt="">
                                </div>
                            </div>
                        </div>
                        <div class="div-padding base">
                            <div>
                                <h4>基本信息</h4>
                            </div>
                            <div>
                               <div class="base-li">
                                    <div>
                                        <div>
                                            <label for="">姓名</label>
                                        </div>
                                        <div>
                                            <el-input placeholder="请输入内容" v-model="username" clearable></el-input>
                                        </div>
                                    </div>
                                    <div>
                                        <div>
                                            <label for="">性别</label>
                                        </div>
                                        <div>
                                            <el-radio v-model="sex" label="nan">男</el-radio>
                                            <el-radio v-model="sex" label="nv">女</el-radio>
                                        </div>
                                    </div>
                               </div>
                               <div class="base-li">
                                   <div>
                                        <div>年龄</div>
                                        <div>
                                            <el-select v-model="startAge" placeholder="年龄" class="select-stature">
                                            <el-option
                                                    v-for="item in ageJson"
                                                    :key="item.value"
                                                    :label="item.label"
                                                    :value="item.value">
                                                </el-option>
                                            </el-select>
                                            <span>~</span>
                                            <el-select v-model="endAge" placeholder="年龄" class="select-stature">
                                                <el-option
                                                    v-for="item in ageJson"
                                                    :key="item.value"
                                                    :label="item.label"
                                                    :value="item.value">
                                                </el-option>
                                            </el-select>
                                        </div>
                                    </div>
                                    <div>
                                        <div>
                                            <label for="">身高</label>
                                        </div>
                                        <div>
                                            <el-select v-model="startStature" placeholder="身高" class="select-stature">
                                                <el-option
                                                    v-for="item in statureJson"
                                                    :key="item.value"
                                                    :label="item.label"
                                                    :value="item.value">
                                                </el-option>
                                            </el-select>
                                            <span>~</span>
                                            <el-select v-model="endStature" placeholder="身高" class="select-stature">
                                                <el-option
                                                    v-for="item in statureJson"
                                                    :key="item.value"
                                                    :label="item.label"
                                                    :value="item.value">
                                                </el-option>
                                            </el-select>
                                        </div>
                                    </div>
                               </div>
                               <div class="base-li">
                                   <div>
                                        <div>
                                            <label for="">现居地</label>
                                        </div>
                                        <div>
                                            <el-cascader
                                                size="large"
                                                :options="options"
                                                v-model="currentArea"
                                                :props="{ expandTrigger: 'hover' }"
                                                placeholder="现居地"
                                                @change="handleChange">
                                            </el-cascader>
                                        </div>
                                   </div>
                                   <div>
                                        <div>
                                            <label for="">原籍地</label>
                                        </div>
                                        <div>
                                            <el-cascader
                                                size="large"
                                                :options="options"
                                                v-model="area"
                                                :props="{ expandTrigger: 'hover' }"
                                                placeholder="原籍地"
                                                @change="handleChange">
                                            </el-cascader>
                                        </div>
                                   </div>
                               </div>
                            </div>
                        </div>

                        <div class="div-padding ask">
                            <div>
                                <h4>择偶要求</h4>
                            </div>
                            <div></div>
                        </div>
                        <div class="div-padding filter">
                            <div>
                                <h4>主页显示</h4>
                            </div>
                            <div></div>
                        </div>
                        <div class="div-padding btn">
                            <el-button type="danger">取消</el-button>
                            <el-button type="success">保存</el-button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="footer"></div>
    </div>
</template>

<script type="text/javascript">

  import { provinceAndCityDataPlus } from 'element-china-area-data'

	export default {
		data () {
			return {
				username: '',
				sex: 'nan',
				options: provinceAndCityDataPlus,
        		currentArea: [],
				area: [],
				ageJson: '',
				statureJson: '',
				startAge: '20',
				endAge: '20',
				startStature: '150',
				endStature: '170'
			}
		},
		methods: {
			handleChange (value) {
				console.log(value)
			}
		},
		created () {
			this.ageJson = require('../../../static/data/age.json');
			this.statureJson = require('../../../static/data/stature.json');
		}

	}
</script>

<style>
	body{
		background: #E6E6E6;
	}

	.footer{
		height: 100px;
	}

	.user{
		width: 162px;
		height: 185px;
		overflow: hidden;
	}
	.user-detail:hover{
		width:280px;
		box-shadow:15px 12px 16px #888;
		position: absolute;
		z-index: 100;
		background: #fff;
		cursor: pointer;
	}

	.menu-li-active{
		background: #E6E6E6;
		color: red;
	}

	.menu-li:hover{
		background: #f4f4f4;
	}

	.user-detail:hover .user-info{
		margin:0;
	}

	.user-info{
		margin-left: -75px;
	}

	.user-img{
		width: 100%;
    	text-align: -webkit-center;
		height: 75%;
	}

	.user-img img{
		width: 100%;
    	height: 100%;
	}

	.main{
		padding-top: 20px;
	}

	.div-padding{
		background: #fff;
    	padding: 20px;
	}

	.top{
		background-image: url(../../../static/img/top.jpg);
		background-repeat: no-repeat;
		background-size: cover;
		height: 67px;
	}

	.space-between, .vertical-center {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
	}

	.menu .logo img{
		height: 36px;
	}

	.nav-top-list__rightInfo {
		margin: 0!important;
		position: absolute!important;
		right: 0;
		top: 17px;
		cursor: pointer;
	}

	.top-ul{
		position: relative;
		padding-top: 20px;
	}

	.nav-top-list__rightInfo img{
		width: 28px;
		height: 28px;	
	}

	ol, ul {
		list-style: none;
	}

	.nav-top-list__li {
		-webkit-transition: .1s;
		-o-transition: .1s;
		transition: .1s;
		line-height: 36px;
		font-size: 18px;
		padding: 0 40px;
		position: relative;
		cursor: pointer;
	}

	.menu ul li {
		float: left;
		font-size: 16px;
	}

    .menu{
		border-bottom: 1px solid #e1e2e6;
    	background: #fff;
	}

	.wraps {
		width: 1100px;
		margin: 0 auto;
	}

	img{
		display: block;
		margin: 0;
		padding: 0;
	}

    .user-column{
        width: 225px;
        padding-right: 30px;
        float: left;
    }

    .user-setting{
        margin-left: 250px;
        display: flow-root;
    }

    .img-top img{
        width: 255px;
    }

    .img-list-li{
        display: flex;
        display: -webkit-box;
    }

    .img-list-li img{
        width: 168px;
        height: 120px;
        margin: 0 10px;
    }

    .img-list-li.second{
        padding-top: 14px;
    }

    .col-ul{
        line-height: 65px;
    }

    .col-ul li{
        text-align: center;
    }

    .col-ul li:hover{
        background: #e1e2e6;
    }

    .col-ul .active{
        background: #e1e2e6;
    }

    .user-setting .pic{
        display: flex;
    }

    .user-setting .base,.user-setting .ask,.user-setting .filter{
        margin-top: 20px;
        display: flow-root;
    }

    .user-setting .btn{
        margin-top: 20px;
        display: flow-root;
        text-align: center;
    }

    .base-li{
        display: flex;
        line-height: 75px;
        justify-content: space-between;
    }

    .base-li>div{
        display: flex;
        width: 50%;
    }

    .base-li>div>div:first-child{
        width: 15%;
    }

    .select-stature{
		width: 130px;
	}

</style>